<template>
  <div>
    <div style="display: flex;justify-content: center">
      <el-input v-model="keywords" placeholder="通过用户名搜索用户。。。" prefix-icon="el-icon-search"
                style="width: 400px;margin-right: 10px"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
    </div>
    <div class="admin-content">
      <el-card class="admin-card" v-for="(admin,index) in admins":key="index">
        <div slot="header" class="clearfix">
          <span>{{admin.name}}</span>
          <el-button style="float: right;color: red; padding: 3px 0" type="text" icon="el-icon-delete"
                     @click="deleteAdmin(admin)"></el-button>
        </div>
        <div>
          <div class="img-container">
            <img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userFace-img">
          </div>
          <div class="userinfo-container">
            <div>用户名：{{admin.name}}</div>
            <div>用户名：{{admin.phone}}</div>
            <div>用户名：{{admin.telephone}}</div>
            <div>用户名：{{admin.address}}</div>
            <div>用户状态：
              <el-switch
                  v-model="admin.enabled"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="enabledChange(admin)"
                  active-text="启用"
                  inactive-text="禁用">
              </el-switch>
            </div>
            <div>
              用户角色：
              <el-tag size="mini" style="margin-right: 4px"
                      type="success" v-for="(role,indexj) in admin.roles" :key="indexj">
                {{role.nameZh}}</el-tag>
              <el-popover
                  placement="right"
                  title="角色列表"
                  width="200"
                  @show="showPop(admin)"
                  @hide="hidePop(admin)"
                  trigger="click">
                <el-select v-model="selectedRoles" multiple placeholder="请选择">
                  <el-option
                      v-for="(r,index) in allRoles"
                      :key="index"
                      :label="r.nameZh"
                      :value="r.id">
                  </el-option>
                </el-select>
                <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
              </el-popover>
              <div>
                备注：{{admin.remark}}
              </div>
            </div>

          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysAdmin",
  data(){
    return{
      admins:[],
      keywords:'',
      allRoles:[],
      selectedRoles:[]
    }
  },
  mounted() {
    this.initAdmins()
  },
  methods:{
    hidePop(admin){
      let url='/system/admin/role?adminId='+admin.id;
      this.selectedRoles.forEach(sr=>{
        url+='&rids='+sr
      })
      this.putRequest(url).then(resp=>{
        if (resp){
          this.initAdmins()
        }
      })

    },
    showPop(admin){
      this.initAllRoles()
      let roles=admin.roles
      this.selectedRoles=[]
      roles.forEach(r=>{
        this.selectedRoles.push(r.id)
      })
    },
    initAllRoles(){
      this.gettRequest('/system/admin/roles').then(resp=>{
        if (resp){
          this.allRoles=resp
        }
      })
    },
    enabledChange(admin){
      this.putRequest('/system/admin/',admin).then(resp=>{
        if (resp){
          this.initAdmins()
        }
      })

    },
    deleteAdmin(admin){
      this.$confirm('此操作将永久删除['+admin.name+']角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/admin/'+admin.id).then(resp=>{
          if (resp){
            this.initAdmins()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    doSearch(){
      this.initAdmins()
    },
    initAdmins(){
      this.gettRequest('/system/admin/?keywords='+this.keywords).then(resp=>{
        if (resp){
          this.admins=resp;
        }
      })
    }
  }
}
</script>

<style>
  .admin-content{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .admin-card{
    width: 350px;
    margin-bottom: 20px;
  }
  .userFace-img{
    width: 72px;
    height: 72px;
    border-radius: 72px;
  }
  .img-container{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .userinfo-container{
    font-size: 12px;
    color: cornflowerblue;
  }

</style>